<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/mac/core.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script><title>JQuery MagicGrid&nbsp;文档</title>
<meta name="description" content="JQuery MagicGrid Document" />
<meta name="keywords" content="JQuery Grid Plugin Document" />
<link href="/javascript/tabs/css/default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/tabs.js"></script>
<script type="text/javascript">
$(function(){
	$('#docTabs').mac('tabs',{
		items: [{
			code: 'overview',
			title: 'Overview',
			height: 'auto',
			el: $('#overview')
		},{
			code: 'options',
			title: 'Options',
			height: 'auto',
			el: $('#options')
		},{
			code: 'events',
			title: 'Events',
			height: 'auto',
			el: $('#events')
		},{
			code: 'methods',
			title: 'Methods',
			height: 'auto',
			el: $('#methods')
		}]
	}).selectFirst();
});
</script>
</head>
<body>
<style stype="text/css">
#head { height: 60px; background-color: #333; }
#head img { float: left; border: none; }
#head .right { float: right; height: 60px; color: #FFF; text-align: right; }
#head .right a { color: #CCC; font-size: 16px; color: #FFF; }
#head .title {
	color: #F93; float: left; height: 60px; line-height: 60px;
	font-size: 40px; font-family: Impact, 'Comic Sans MS';
}
#head a { color: #F93; text-decoration: underline; }
.hr { height: 12px; background: transparent url(/css/images/nm-b.png) repeat-x; }
</style>
<div id="head">
	<a href="/cn/"><img src="/css/images/logo_s.png" alt="logo of boarsoft.com" /></a>
	<div class="title"><a href="/cn/">boarsoft.com</a></div>
	<div class="right">
		<a href="/public/lang.php?l=en">English</a>
		|
		<a href="/public/lang.php?l=cn">简体中文</a>
		|
		<a href="http://www.jquery.com" target="_blank">JQuery</a>
		|
		<a href="http://www.jqueryui.com" target="_blank">JQuery UI</a>
		|
		<a href="http://code.google.com/p/dynatree/" target="_blank">JQuery Dynatree Plugin</a>
		&nbsp;&nbsp;
		<br/>
		<br/>
		This site has JQuery, Ext/Sencha Plugins, such as: Grid Combobox Tree Tabs&nbsp;&nbsp;<br/>
		Please use IE7+, FireFox, Chrome&nbsp;&nbsp;
	</div>
</div>
<div class="hr"></div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/cn/">Home</a>
		&gt;
		<a href="/cn/javascript">Javascript</a>
		&gt;
		<a href="/cn/javascript/grid">MagicGrid</a>
		&gt;
		文档	</div>
	<div id="nav_back">
		<a href="/cn/javascript/grid">示例</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/cn/javascript">下载</a>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div id="docTabs" class="tabs"></div>
<div id="overview">
	MagicGrid 是一个小巧灵活且极具魅力的JQuery表格插件。
	虽然它只提供了基础的表格功能，但良好设计模式，使得以它拥有丰富的扩展方式和极强的适应性。
	<p>基本功能与特性：</p>
	<ol>
		<li>可调整列宽，<a href="">示例</a></li>
		<li>可通过拖放交换列的顺序，<a href="">示例</a></li>
		<li>支持从远程和本地加载数据，<a href="">示例</a></li>
		<li>支持行列自定义生成（Render），<a href="">示例</a></li>
		<li>代码简洁清晰，源码不到10K，压缩后不到3K，易于修改</li>
		<li>容易学习，使用简单</li>
		<li>简洁易调的样式表定义</li>
	</ol>
	仅需少量代码，即可实现以下功能：
	<ol>
		<li>多行分组表头（目前支持两行），<a href="">示例</a></li>
		<li>本地或服务器端排序，<a href="">示例</a></li>
		<li>本地或远程分页，<a href="">示例</a></li>
		<li>自定义分页栏样式，<a href="">示例</a></li>
		<li>合计行，<a href="">示例</a></li>
		<li>行扩展，<a href="">示例</a></li>
		<li>锁定第一列，<a href="">示例</a></li>
	</ol>
</div>
<div id="options">
	<h3><a href="#">sortLocally</a></h3>
	<p>
		前台和后台数据排序. default = false.
		<ul>
			<li>true:通过JS在前台排序.</li>
			<li>false:通过传递参数到后台排序</li>
		</ul>
	</p>
	<h3><a href="#">表头高度</a></h3>
	<p>
		表格高度集合. 使用于多行表头
		<a href="">Demo</a> 
	</p>
	<h3><a href="#">cols</a></h3>
	<p>
		表格中列的集合
		<table>
			<tr>
				<th>Items</th>
				<th>描述</th>
				<th>备注</th>		
			</tr>
			<tr>
				<td>field</td>
				<td>数据对象属性</td>
				<td>可选</td>
			</tr>
			<tr>
				<td>title</td>
				<td>列标题，可以是JS或者JQUERY元素</td>
				<td>可选, <a href="">例子</a></td>
			</tr>
			<tr>
				<td>width</td>
				<td>列宽度</td>
				<td>必须设置，以px为单位</td>
			</tr>
			<tr>
				<td>header</td>
				<td>用JS或者JQUERY元素为传统标题</td>
				<td>可选, 在多行表头中不重要.<a href="">例子</a></td>
			</tr>
			<tr>
				<td>sizeable</td>
				<td>I列是否可以重置宽度</td>
				<td>可选, default = true</td>
			</tr>
			<tr>
				<td>render</td>
				<td>返回JS或者JQUERY元素显示在单元格的函数</td>
				<td>可选.<a href="">例子</a></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
					1. r: record object<br/>
					2. tr:row element<br/>
					3. gd: grid element<br/>
				</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</p>
	<h3><a href="#">loader</a></h3>
	<p>
		<ul>
			<li>url: URL, 加载数据的地址</li>
			<li>params: 加载数据参数, eg: { pageNo: 1, pageSize: 20 }</li>
			<li>autoLoad: 自动加载数据. default = true</li>
		</ul>
	</p>
	<h3><a href="#">pagerLength</a></h3>
	<p>
		在页数显示栏里显示一共有多少页. 可选.
		如果没有选择，页面显示栏将被隐藏.
	</p>
</div>
<div id="events">
	<h3><a href="#">afterLoad(dd, [po])</a></h3>
	<p>
		此事件在Grid加载完数据时触发。<a href="">示例</a>
		<ul>
			<li>dd: 表格所需的直接数据（数组）。<a href="">示例</a></li>
			<li>po: 完整的表格数据对象（含分页信息）。 <a href="">示例</a></li>
		</ul>
	</p>
</div>
<div id="methods">
	<h3><a href="#">sort([el])</a></h3>
	<p>
		按默认的列或者指定的列排序
		<ul>
			<li>el:排序的列，可选，一般不选</li>
		</ul>
	</p>
	<h3><a href="#">adjust([vp])</a></h3>
	<p>
		调整表格的高度与宽度
		<ul>
			<li>vp: 包含表格的容器，可选</li>
		</ul>
	</p>
	<h3><a href="#">newRow(r, [k])</a></h3>
	<p>
		创建新的一行不插入表格<br/>
		返回所创建的行
		<ul>
			<li>r: 所创建行的数据</li>
			<li>k:所创建行的索引. 表格的设置中如果没有设置索引，那么k值必须传</li>
		</ul>
		Here is an <a href="/cn/javascript/grid/index.php?code=exp">Demo</a>.
	</p>
	<h3><a href="#">addRow(r, [k])</a></h3>
	<p>
		创建新的一行并且插入表格.<br/>
		Same param with <a href="#methods.newRow">"newRow"</a> method.
	</p>
	<h3><a href="#">loadData(data, [po])</a></h3>
	<p>
		从本地内存中加载数据到表格.
		<ul>
			<li>dd: 表格数据数组.<a href="">format Demo</a></li>
			<li>po: 完整的表格数据，包括分页信息. this param will be passed to <a href="#events.afterLoad">afterLoad</a> event.<a href="">format Demo</a></li>
		</ul>
	</p>
	<h3><a href="#">load([pm])</a></h3>
	<p>
		远程加载数据到表格.
		<ul>
			<li>pm: 加载数据的IP地址. eg: { name: 'tom' }</li>
		</ul>
	</p>
	<h3><a href="#">lockCols(cs)</a></h3>
	<p>
		锁定指定的列
		<ul>
			<li>cs: 需要锁定的列名, eg: ['code','name']</li>
		</ul>
	</p>	
</div><iframe src="/javascript/related.php" class="related"></iframe>
<div class="clear" style="height: 8px;"></div>
<div style="text-align: right;">
	Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
	QQ: 7213571&nbsp;&nbsp;MSN: pyh_jerry@163.com&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!--
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24473339-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
	&nbsp;&nbsp;
</div></body>
</html>
